<template>
  <div class="room">
    <live-tools :tools="tools" @toolClick="toolClick" />
    <content-view ref="contentRef" />
    <right-view />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import type { Ref } from 'vue'
import TRTCCloud, {
  TRTCParams,
  TRTCAppScene,
  Rect,
  TRTCScreenCaptureProperty,
  TRTCVideoEncParam,
  TRTCVideoResolution,
  TRTCVideoResolutionMode,
  TRTCVideoStreamType,
  TRTCScreenCaptureSourceInfo,
  TRTCAudioQuality
} from 'trtc-electron-sdk'
import { useUserStore } from '@/store/modules/user'
import LiveTools from '@/views/room/LiveTools.vue'
import ContentView from '@/views/room/ContentView.vue'
import RightView from '@/views/room/RightView.vue'
import { ToolsItem } from '@/utils/types'
import { toolsKey } from '@/utils/dicts'
import { tools } from '@/views/room/data'

const contentRef = ref(null)
const userStore = useUserStore()
const trtcCloud = TRTCCloud.getTRTCShareInstance()

/*进入房间*/
const enterRoom = () => {
  let param = new TRTCParams()
  const { sdkAppId, userSig, roomId, userId } = userStore.userInfo
  console.log(userStore.userInfo, 'aa')
  param.sdkAppId = sdkAppId
  param.userSig = userSig
  param.roomId = roomId
  param.userId = userId
  trtcCloud.enterRoom(param, TRTCAppScene.TRTCAppSceneVideoCall)
}

/*启动本地摄像头采集和预览*/
function triggerCamera(item: ToolsItem) {
  const microphone: ToolsItem | undefined = tools.find(
    itm => itm.key === toolsKey.microphone
  )
  if (item.isOpen) {
    // 关闭摄像头及麦克风
    trtcCloud.stopLocalAudio()
    trtcCloud.stopLocalPreview()
    item.name = '开启视频'
    item.icon = 'video-close'
    microphone!.icon = 'microphone-close'
  } else {
    // 开启摄像头及麦克风
    trtcCloud.startLocalAudio(TRTCAudioQuality.TRTCAudioQualitySpeech) // 开启麦克风采集，并设置当前场景为：语音模式（高噪声抑制能力、强弱网络抗性）
    trtcCloud.startLocalPreview(contentRef.value?.$el)
    item.name = '关闭视频'
    item.icon = 'video-open'
    microphone!.icon = 'microphone-open'
  }
  item.isOpen = !item.isOpen
}

function toolClick(item: ToolsItem) {
  console.log(item, contentRef.value)
  switch (item.key) {
    case toolsKey.drawBoard:
      // 白板
      break
    case toolsKey.microphone:
      // 静音
      break
    case toolsKey.video:
      // 开启视频
      triggerCamera(item)
      break
    case toolsKey.screenShare:
      // 共享屏幕
      break
    case toolsKey.volume:
      // 音量
      break
    case toolsKey.set:
      // 设置
      break
  }
}

function onUserSubStreamAvailable(userId: string, available: number) {
  // 监听 当房间里有一个用户启动了屏幕分享
  console.log('监听到房间里有一个用户启动了屏幕分享')
  if (available === 1) {
    trtcCloud.startRemoteView(
      userId,
      contentRef.value?.$el,
      TRTCVideoStreamType.TRTCVideoStreamTypeSub
    )
  } else {
    trtcCloud.stopRemoteView(userId, TRTCVideoStreamType.TRTCVideoStreamTypeSub)
  }
}

/*监听用户是否开启摄像头视频*/
function onUserVideoAvailable(userId: string, available: number) {
  console.log('监听用户是否开启摄像头视频')
  if (available === 1) {
    // 代表该路画面已经有可用的视频数据帧到达
    trtcCloud.startRemoteView(
      userId,
      contentRef.value?.$el,
      TRTCVideoStreamType.TRTCVideoStreamTypeBig // 视频流类型，TRTCVideoStreamTypeBig：主路画面，一般用于摄像头；TRTCVideoStreamTypeSub：辅路画面，一般用于屏幕分享。
    )
  } else {
    trtcCloud.stopRemoteView(userId, TRTCVideoStreamType.TRTCVideoStreamTypeSub)
  }
}

/*监听用户是否开启音频上行*/
function onUserAudioAvailable(userId: string, available: number) {
  console.log('监听用户是否开启音频上行')
  if (available === 1) {
    trtcCloud.startLocalAudio(TRTCAudioQuality.TRTCAudioQualitySpeech) // 开启麦克风采集，并设置当前场景为：语音模式（高噪声抑制能力、强弱网络抗性）
  } else {
    trtcCloud.stopLocalAudio()
  }
}

function registerEvent() {
  trtcCloud.on('onError', (errCode: number, errMsg: string) => {
    console.log(`App.vue onError:`, errCode, errMsg)
  })

  trtcCloud.on('onWarning', (code: number, msg: string, extra: any) => {
    console.log(`App.vue onWarning:`, code, msg, extra)
  })

  trtcCloud.on('onEnterRoom', (result: number) => {
    console.log(`App.vue onEnterRoom:`, result)
  })

  trtcCloud.on('onRemoteUserEnterRoom', (userId: string) => {
    console.log(`App.vue onRemoteUserEnterRoom:`, userId)
  })

  // 监听用户是否开启摄像头视频
  trtcCloud.on('onUserVideoAvailable', onUserVideoAvailable)
  // 监听当房间里有一个用户启动了屏幕分享
  trtcCloud.on('onUserSubStreamAvailable', onUserSubStreamAvailable)
  // 监听用户是否开启音频上行
  trtcCloud.on('onUserAudioAvailable', onUserAudioAvailable)
}

onMounted(() => {
  registerEvent()
})
</script>

<style scoped lang="scss">
.room {
  position: relative;
  height: 100%;
}
</style>
